import React from 'react';

import { List, InputItem } from 'antd-mobile';
import { connect } from 'react-redux';
import { Grid } from 'antd-mobile';

import { SetInputData } from '@/util/set';
import Socket from '@/decorator/socket';
import { getUserMsgs, sendMsg, receive, setRead } from '@/redux/modules/chatuser';
import { formatId, dateFormat } from '@/util/tools';

@connect(
    state => ({chatUser: state.chatUser, currentUser: state.user}),
    { getUserMsgs, sendMsg, receive, setRead }
)
@Socket
class Chat extends SetInputData{
    constructor(props){
        super(props);
        
        this.state = {
            sendMsg: '',
            msg: [],
            showEmj: false
        }

        this.send = this.send.bind(this);
        this.toId = this.props.match.params.tid;
        this.fromId = this.props.currentUser.userInfo.id;
        this.simg = this.simg.bind(this);
        this.setEmj = this.setEmj.bind(this);
    }
    setEmj(v){
        this.setState({
            sendMsg: this.state.sendMsg + v.text
        })
    }
    simg(){
        this.setState({
            showEmj: !this.state.showEmj
        })
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'))
        })
    }
    init(){
        // getUserMsgs
        // this.props.getUserMsgs();
        // 获取socket推送消息
        // this.props.receive(this.fromId);
        // 修正弹出的emoji 不滑动就出Bug 手动派发一个事件刷新一下就Ok了

    }
    
    send(){
        const msg = {
            from: this.fromId,
            to: this.toId,
            msg: this.state.sendMsg ? this.state.sendMsg : '',
            chat_id: formatId(this.fromId, this.toId)
        };

        this.props.sendMsg(msg);

        this.setState({
            sendMsg: ''
        })
    }
    render(){
        const emoji = '😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍 😅 😉 😉 😉 😍 😍 😍'.split(' ').map(v => ({
            text: v
        }));
        const { sendMsg, showEmj } = this.state;
        const { users, msgs } = this.props.chatUser;
        let readIds = [];
        return (<div>
            <div style={{width:'100%',paddingBottom:'40px'}}>
            <h2>{users[this.toId] && users[this.toId].name}</h2>
            {
                msgs.map((item, i) => {
                    this.toId === item.from && this.fromId === item.to && !item.isRead && readIds.push(item._id);
                    if(formatId(this.fromId, this.toId) === item.chat_id){
                        const FLG = this.fromId !== item.from;
                        return (<p style={{textAlign: FLG ? 'left' : 'right',width:'100%', marginBottom:'20px', borderBottom:'1px solid #f00'}} key={item._id}>
                        
                        <img src={require(`@/component/avatarselector/img/${users[item.from].tx}.png`)} alt='' />
                        {users[item.from].name}:
                        {item.msg}<br />{dateFormat(+item.create_time, 'Y-m-d H:i:s')}</p>)
                    }else{
                        return null;
                    }
                })
            }
            {
                readIds.length > 0 && this.props.setRead(readIds)
            }
            </div>
            <List style={{position:'fixed', bottom:'0'}}>
                <InputItem value={sendMsg} onChange={this.sendMsg}  placeholder="请输入"
                extra={
                <div>
                    <span role="img" aria-labelledby="" onClick={this.simg}>😍</span>
                    <span onClick={this.send}>发送</span>
                </div>
                }
                >信息</InputItem>
            </List>
            {showEmj && <Grid style={{position:'fixed',bottom:'44px'}}  data={emoji} 
            columnNum={9}
            carouselMaxRow={4}
            isCarousel={true}
            onClick={this.setEmj}
            />}
        </div>)
    }
}

export default Chat;